<template>
  <div class="wft-dynamic-comp-senior-loop" :style="loopCompStyle" :ref="attrs.ref">
    <div v-for="(item, index) in curComp.data" :key="item.id || index" :class="[animationsClass(curComp.children[0].style.animate.classNames), { 'animate__infinite': curComp.children[0].style.animate.isInfinite }]" :style="compStyle" style="background-size: 100% 100%;">
      <component :curComp="curComp.children[0]" :data="item" :is="`${curComp.children[0].compKey}Temp`" />
    </div>
  </div>
</template>
<script>
import { animationsClass } from '../../utils'
import useRequestMixin from '../../mixins/useRequest'
import useAttrsMixin from '../../mixins/useAttrs'
export default {
  mixins: [useRequestMixin, useAttrsMixin],
  data() {
    return { animationsClass }
  },
  props: {
    curComp: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    compStyle() {
      const s = {}
      const comp = this.curComp.children[0]
      const { backgroundColor, backgroundImage, border } = JSON.parse(JSON.stringify(comp.style))
      s.backgroundColor = backgroundColor
      s.backgroundImage = `url(${backgroundImage})`
      if(border.show) {
        s.border = `${border.borderWidth}px ${border.borderType} ${border.borderColor}`
        s.borderRadius = `${border.borderRadius}px`
      }
      return {
        width: comp.resizeGrid.width,
        height: comp.resizeGrid.height,
        ...s
      }
    },
    // 循环组件单独样式
    loopCompStyle() {
      const { display, flexDirection, justifyContent, alignItems, flexWrap, alignContent, paddingTop, paddingRight, paddingBottom, paddingLeft } = this.attrs
      return { display, flexDirection, justifyContent, alignItems, flexWrap, alignContent, paddingTop: paddingTop + 'px', paddingRight: paddingRight + 'px', paddingBottom: paddingBottom + 'px', paddingLeft: paddingLeft + 'px' }
    }
  }
}
</script>
<style scoped>
.wft-dynamic-comp-senior-loop {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
